<template>
<div>
  <div class="top">
    <div class="left"><img src="@/assets/logo.png" alt="" /></div>
    <div class="right">
      <p>
        <i class="iconfont top-i icon-user"></i> <br /><span class="r-zi"
      >我的</span
      >
      </p>
      <p>
        <i class="iconfont top-i icon-nav"></i> <br /><span class="r-zi"
      >导航</span
      >
      </p>
    </div>
  </div><!--  头部结构-->
  <div class="content"><!--流程图-->
    <img src="../assets/process/process1.jpg" alt="">
    <img src="../assets/process/process2.jpg" alt="">
    <img src="../assets/process/process3.png" alt="">
    <img src="../assets/process/process4.jpg" alt="">
    <p>NO.1&ensp;收房验房</p>
    <p>NO.2&ensp;装修预算</p>
    <p>NO.3&ensp;装修风水</p>
    <p>NO.4&ensp;装修设计</p>
    <p>NO.5&ensp;材料选择</p>
    <p>NO.6&ensp;水电工程</p>
    <p>NO.7&ensp;泥木工程</p>
    <p>NO.8&ensp;油漆工程</p>
    <p>NO.9&ensp;装修验房</p>
    <p>NO.10&ensp;去污保洁</p>
    <p>NO.11&ensp;软装搭配</p>
    <p>NO.12&ensp;家居生活</p>
  </div>

  <div class="txt">
    &emsp;房先森互联网家装有别于传统装修公司与其他装修中介平台，以自营模式整合设计师与项目经理，利用互联网将工地进行在线全景直播，通过去中间环节，提供装修套餐 + 个性化定制服务。
  </div>

  <footer class="footer-nav">
    <p>
      <i class="iconfont icon-hot-line green"></i>
      <a href=" ">服务热线:17757169861</a >
    </p >
    <p class="flex">
      <a href="/" class="green">触屏版</a >
      <a href="http://www.sirfang.com/">电脑版</a >
      <a href="/aboutus/">关于我们</a >
      <a href="/contact/">联系我们</a >
    </p >
    <p class="copyright">© 2016 <a href="https://beian.miit.gov.cn" target="_blank">浙ICP备15033817号-1</a ></p >
  </footer>

</div>
</template>

<script>
export default {
  name: "Process"
}
</script>

<style scoped lang="scss">
.top,//30-44是头部的样式
.right {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
.left {
  img {
    margin-left: 18px;
    margin-top: 16px;
    width: 120px;
    margin-bottom: 16px;
  }
}
.right {
  p {
    margin: 5px 10px;
  }
  text-align: center;
  .r-zi {
    font-size: 22px;
    color: #999;
  }
  .top-i {
    font-size: 22px;
    color: #999;
    margin-bottom: 18px;
  }
}//头部样式结束
//以下流程图样式
.content {
  width: 100%;
  img {
    width: 100%;
    height: 100%;
    float: left;
  }
  p {
    position: absolute;
    &:nth-child(5){
      top: 295px;
      left: 100px;
    }
    &:nth-child(6){
      top: 375px;
      left: 165px;
    }
    &:nth-child(7){
      top: 455px;
      left: 100px;
    }
    &:nth-child(8){
      top: 535px;
      left: 165px;
    }
    &:nth-child(9){
      top: 725px;
      left: 165px;
    }
    &:nth-child(10){
      top: 810px;
      left: 100px;
    }
    &:nth-child(11){
      top: 890px;
      left: 165px;
    }
    &:nth-child(12){
      top: 970px;
      left: 100px;
    }
    &:nth-child(13){
      top: 1170px;
      left: 100px;
    }
    &:nth-child(14){
      top: 1250px;
      left: 165px;
    }
    &:nth-child(15){
      top: 1325px;
      left: 100px;
    }
    &:nth-child(16){
      top: 1405px;
      left: 165px;
    }
  }
}
//以下是文本区域
.txt {
  box-sizing: border-box;
  background-color: #fff;
  width: 100%;
  padding: 20px 10px;
}



.footer-nav {
  padding: 0.3rem
;
  margin-top: 0.3rem
;
  background: #fff;
  font-size: 14px;
  text-align: center;
  color: #999;
}
.footer-nav p {
  margin-bottom: 0.2rem
;
}
.flex {
  width: 100%;
  display: flex;
}
.flex a, .flex li {
  width: 100%;
  display: inline-block;
  flex: 1;
  text-align: center;
}.green {
   color: #2bb281;
 }
.footer-nav p.copyright {
  margin-top: 0.3rem
;
  padding-top: 0.3rem
;
  border-top: 1px
  solid #eaeaea;
}
</style>